<style type="text/css">
	.border-container::after {
    	content: "Filtrar por";
	}
      
	#lblCostsCentres {
		margin-bottom: 0;
	}
	
	#managerRel {
		display: none;
	}
	
	#page-content-wrapper {
		padding-bottom: 0;
		padding-left: 10px;
		padding-right: 15px;
	}
	
	.inset {
		padding-bottom: 0;
		padding-top: 5px;
		padding-left: 2px;
		padding-right: 2px;
	}
</style>
    
<div id="wrapper" class="reportComponents">
	<!-- Sidebar -->
	<div id="sidebar-wrapper">
		<form id="frmFilter" role="form">
			<div class="border-container">
	          
				<div class="form-group">
					<label for="refDate" class="control-label">Data de Referência</label>
					<div class="input-group date">
						<input type="text" class="form-control" name="refDate" id="refDate"><span class="input-group-addon"><i class="glyphicon glyphicon glyphicon-calendar"></i></span>
					</div>
				</div>
		          
				<div class="form-group">
					<label for="customerId" class="control-label">Cliente</label>
					<select name="customerId" id="customerId" class="form-control">
						<option value=""></option>
						@foreach ($customers as $item)
							<option value="{{ $item->id }}">{{ $item->name }}</option>
						@endforeach
					</select>
				</div>
	              
				<div class="form-group">
					<label for="orderNumber" class="control-label">Nro Pedido</label>
					<input type="text" name="orderNumber" id="orderNumber" class="form-control">
				</div>
				
				<div class="form-group">
					<label for="productionNumber" class="control-label">Ordem de Produção</label>
					<input type="text" name="productionNumber" id="productionNumber" class="form-control">
				</div>
				
				<div id="componentsGroup">
					<div  class="form-group">
						<label for="code" class="control-label">Cod CIGAM</label>
						<input type="text" name="code" id="code" class="form-control">
					</div>
					
					<div  class="form-group">
						<label for="accessory" class="control-label">Tipo</label>
						<select name="accessory" id="accessory" class="form-control">
							<option value=""></option>
							<option value="1">Insumo</option>
							<option value="0">Operação</option>
						</select>
					</div>
					
					<div class="form-group">
						<label for="costsCentresId" class="control-label">Centro de Custo Atual</label>
						<select name="costsCentresId" id="costsCentresId" class="form-control">
							<option value=""></option>
							@foreach ($costsCentres as $item)
								<option value="{{ $item->id }}">{{ $item->name }}</option>
							@endforeach
						</select>
					</div>
				</div>	
				<div class="text-center">
					{{ HTML::link('#', 'Limpar', array('class' => 'btn btn-default', 'id' => 'btnReset')) }} | 
					{{ HTML::link('#', 'Filtrar', array('class' => 'btn btn-primary', 'id' => 'btnFilter')) }}
				</div>
			</div>
		</form>
	</div>

	<!-- Page content -->
	<div id="page-content-wrapper">
		@if(Session::has('message'))
            <div class="alert alert-danger">{{ Session::get('message') }}</div>
        @endif
	
		<div class="content-header">
			<h1 class="page-header">
				<a id="menu-toggle" href="#" class="btn btn-default"><i class="glyphicon glyphicon-transfer"></i></a>
				Acompanhamento <small><a href="#" id="btnReportProduction" class="btn btn-default active">Produção</a> | <a href="#" id="btnReportManager" class="btn btn-default">Gerencial</a></small> 
			</h1>
		</div>

		<!-- Keep all page content within the page-content inset div! -->
		<div class="page-content inset">
			<div id="productionRel">
				<ul class="nav nav-tabs">
					<li><a href="#lateC" data-toggle="tab">Atrasado</a></li>
					<li class="active"><a href="#onScheduleC" data-toggle="tab">Em dia</a></li>
					<li><a href="#aheadScheduleC" data-toggle="tab">Adiantado</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane" id="lateC">
						<div class="pnlBehindTime panel panel-danger">
							<div class="panel-heading">Itens em atraso</div>
							<table id="lateComponents" class="table table-hover table-striped"></table>
						</div>
					</div>
					
					<div class="tab-pane active" id="onScheduleC">
						<div class="pnlOnTime panel panel-success">
							<div class="panel-heading">Itens em dia</div>
			              	<table id="onScheduleComponents" class="table table-hover table-striped"></table>
						</div>
					</div>
					
					<div class="tab-pane" id="aheadScheduleC">				
						<div class="pnlAheadTime panel panel-info">
			                <div class="panel-heading">Itens adiantados</div>
			              	<table id="aheadScheduleComponents" class="table table-hover table-striped"></table>
						</div>
					</div>
					<div id="mdl" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
					        <div class="modal-content">
					          
					        </div>
					      </div>
					</div>
				</div>
			</div>
			
			<div id="managerRel">
				<ul class="nav nav-tabs">
					<li><a href="#lateO" data-toggle="tab">Atrasado</a></li>
					<li class="active"><a href="#onScheduleO" data-toggle="tab">Em dia</a></li>
					<li><a href="#aheadScheduleO" data-toggle="tab">Adiantado</a></li>
					<li><a href="#executedO" data-toggle="tab">Concluído</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane" id="lateO">
						<div class="pnlBehindTime panel panel-danger">
							<div class="panel-heading">Pedidos atrasados</div>
							<table id="lateOrders" class="table table-hover table-striped"></table>
						</div>
					</div>
					
					<div class="tab-pane active" id="onScheduleO">					
						<div class="pnlOnTime panel panel-success">
							<div class="panel-heading">Pedidos em dia</div>
			              	<table id="onScheduleOrders" class="table table-hover table-striped"></table>
						</div>
					</div>
							
					<div class="tab-pane" id="aheadScheduleO">			
						<div class="pnlAheadTime panel panel-info">
			                <div class="panel-heading">Pedidos adiantados</div>
			              	<table id="aheadScheduleOrders" class="table table-hover table-striped"></table>
						</div>
					</div>
					
					<div class="tab-pane" id="executedO">			
						<div class="pnlExecuted panel panel-info">
			                <div class="panel-heading">Pedidos concluídos nos últimos 30 dias <small class="pull-right">(Esta lista não é afetada pelo filtro Data de Referência)</small></div>
			              	<table id="executedOrders" class="table table-hover table-striped"></table>
						</div>
					</div>
					
					<div id="mdlManager" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
					        <div class="modal-content">
					          
					        </div>
					      </div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>	
	$(document).ready(function() {
		$('.reportComponents').dashboard({
			rootUrl: $.rootUrl
		});
	});
</script>